<template lang="html">
  <div class="">
    <div class="item" v-for="(item, index) of list" :key="index">
      <div class="item-title border-bottom">
        <span class="item-title-icon"></span>
        {{ item.title }}
      </div>
      <div class="item-children" v-if="item.children" v-for="(i, keys) of item.children" :key="keys">
        <h5 class="item-children-title">{{i.title}}</h5>
        <div class="item-children-price">
          ￥
          <em class="price-num">{{ i.price }}</em>
          <span class="price-numword">起</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'DetailList',
  props: {
    list: Array
  }
}
</script>

<style lang="stylus" scoped>
.item-title
  line-height: .8rem
  font-size: .32rem
  padding: 0 .2rem
  .item-title-icon
    display: inline-block;
    position: relative
    width: .36rem
    height: .36rem
    top: .06rem
    left: .06rem
    background: url(http://s.qunarzz.com/piao/image/touch/sight/detail.png) 0 -.45rem no-repeat
    margin-right: .1rem
    background-size: .4rem 3rem
.item-children
  padding: .24rem .2rem
  font-size: .3rem
  position: relative
  .item-children-title
    margin-right: 1.8rem
    color: #333
    line-height: .48rem;
  .item-children-price
    position: absolute
    right: .46rem
    top: .32rem
    font-size: .24rem
    color: #ff9800
    .price-num
      font-size: .4rem
    .price-numword
      display: inline-block
      color: #9e9e9e;
      font-size: .2rem
      margin-left: -.06rem

</style>
